<template>
    <div class="message-item">
      <p :class="logClass" class="log-base-class">msg > {{message}}</p>
    </div>
</template>

<script>
  export default {
    name: 'MessageItem',
    props: [
      'message',
      'logLevel'
    ],
    data(){
      return{
        logClass: "log-level-"
      }
    },
    mounted() {
      switch (this.logLevel) {
        case "info":{
          this.logClass += "info";
          break;
        }
        case "success": {
          this.logClass += "success";
          break;
        }
        case "warning":{
          this.logClass += "warning";
          break;
        }
        case "error":{
          this.logClass += "error";
          break;
        }
      }
    }
  }

</script>

<style scoped>
.log-base-class {
  font-family: Consolas,serif;
  margin-top: 2px;
  margin-bottom: 3px;
  text-align: left;
}
.log-level-info {
  color: #abb2bf;
}
.log-level-success{
  color: #98c379;
}
.log-level-warning{
  color: #ebb563;
}
.log-level-error{
  color: red;
}
</style>
